<template>
  <div>
    <!-- 标题 -->
    <div class="title">
        <img src="../../../assets/images/tool.png" alt="">
        <span>附加信息</span>
    </div>

    <!-- 内容 -->
    <div class="dataList">
      <el-form ref="form" :model="form" label-width="auto">
        <el-row> 
          <el-col :span="12">
            <el-form-item label="企业简称">
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col> 
          <el-col :span="12">
            <el-form-item label="一企一档编码">
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col>  
        </el-row>
        <el-row> 
          <el-col :span="12">
            <el-form-item label="企业编码">
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col> 
          <el-col :span="12">
            <el-form-item label="父级企业编码">
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col>  
        </el-row>
         <el-row> 
          <el-col :span="12">
            <el-form-item label="网关编码">
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col> 
          <el-col :span="12">
            <el-form-item label="化学品登记系统编码">
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col>  
        </el-row>
         <el-row> 
          <el-col :span="12">
            <el-form-item label="化工行业编码">
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col> 
          <el-col :span="12">
            <el-form-item label="安全负责人固定电话">
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col>  
        </el-row>
         <el-row> 
          <el-col :span="12">
            <el-form-item label="职工人数">
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col> 
          <el-col :span="12">
            <el-form-item label="危险化学品作业人员人数">
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col>  
        </el-row>
        <el-row> 
          <el-col :span="12">
            <el-form-item label="剧毒化学品作业人员人数">
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col> 
          <el-col :span="12">
            <el-form-item label="属地安监机构">
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col>  
        </el-row>
       <el-row> 
          <el-col :span="12">
            <el-form-item label="安全监管等级" >
              <el-select v-model="form.region" placeholder="请选择">
                <el-option label="在业" value="shanghai"></el-option>
                <el-option label="停产" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col> 
          <el-col :span="12">
            <el-form-item label="监管分类">
              <el-select v-model="form.region" placeholder="请选择">
                <el-option label="在业" value="shanghai"></el-option>
                <el-option label="停产" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>  
        </el-row>
        <el-row> 
          <el-col :span="12">
            <el-form-item label="是否涉及高危工艺">
              <el-radio-group v-model="form.resource">
                <el-radio label="是"></el-radio>
                <el-radio label="否"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col> 
          <el-col :span="12">
            <el-form-item label="是否涉及重点监管危化品">
              <el-radio-group v-model="form.resource">
                <el-radio label="是"></el-radio>
                <el-radio label="否"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>  
        </el-row>
        <el-row> 
          <el-col :span="12">
            <el-form-item label="营业执照类别" >
              <el-select v-model="form.region" placeholder="请选择">
                <el-option label="在业" value="shanghai"></el-option>
                <el-option label="停产" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col> 
          <el-col :span="12">
            <el-form-item label="是否涉及剧毒品生产或使用">
              <el-radio-group v-model="form.resource">
                <el-radio label="是"></el-radio>
                <el-radio label="否"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>  
        </el-row>
        <el-row> 
          <el-col :span="12">
            <el-form-item label="联系微信">
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col> 
          <el-col :span="12">
            <el-form-item label="年利润（万元）">
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col>  
        </el-row>
        <el-row> 
          <el-col :span="12">
            <el-form-item label="安全负责人电子邮箱">
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col> 
          <el-col :span="12">
            <el-form-item label="层企业资产总额（万元）">
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col>  
        </el-row>
        <el-row> 
          <el-col :span="12">
            <el-form-item label="专职应急管理人员数">
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col> 
          <el-col :span="12">
            <el-form-item label="兼职安全生产管理人员数">
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col>  
        </el-row>
        <el-form-item label="企业官网网站地址">
              <el-input v-model="form.name" ></el-input>
        </el-form-item>
        <el-form-item label="营业执照经营范围">
              <el-input v-model="form.name" ></el-input>
        </el-form-item>
        <el-row> 
          <el-col :span="12">
            <el-form-item label="企业邮箱">
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col> 
          <el-col :span="12">
            <el-form-item label="企业邮箱授权码">
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col>  
        </el-row>
        <el-row> 
          <el-col :span="12">
            <el-form-item label="企固定电话">
              <el-input v-model="form.name" ></el-input>
            </el-form-item>
          </el-col>  
        </el-row>
        <!-- 上传 -->
        <el-row> 
          <el-col :span="12">
            <el-form-item label="企业照片">
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
                <img class="uploadImg" src="../../../assets/images/uploadImg/uploadOne.png" alt="">
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </el-form-item>
          </el-col> 
          <el-col :span="12">
            <el-form-item label="企业风险四色图">
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
                <img class="uploadImg" src="../../../assets/images/uploadImg/uploadOne.png" alt="">
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </el-form-item>
          </el-col>  
        </el-row>
        <el-row> 
          <el-col :span="12">
            <el-form-item label="隐患排查治理制度（单文件）">
                <el-upload
                  class="upload-demo"
                  drag
                  action="https://jsonplaceholder.typicode.com/posts/"
                  multiple>
                <img src="../../../assets/images/uploadImg/uploadTwo.png" alt="">
                </el-upload>
            </el-form-item>
          </el-col> 
          <el-col :span="12">
            <el-form-item label="隐患排查治理制度（单文件）">
                <el-upload
                  class="upload-demo"
                  drag
                  action="https://jsonplaceholder.typicode.com/posts/"
                  multiple>
                <img src="../../../assets/images/uploadImg/uploadTwo.png" alt="">
                </el-upload>
            </el-form-item>
          </el-col>  
        </el-row>
        <el-form-item label="公司介绍">
              <el-input class="contentInput" v-model="form.name" ></el-input>
        </el-form-item>
        <el-form-item label="备注">
              <el-input class="contentInput" v-model="form.name" ></el-input>
        </el-form-item>

        <!-- 下一步按钮 -->
        <el-form-item class="middle">
            <el-button type="primary" @click="onSubmit" plain>保存</el-button>
            <el-button type="primary" @click="nextTo">提交</el-button>
        </el-form-item>

      </el-form>
    </div>  


  </div>
</template>

<script>
export default {
  data(){
    return{
      form: {
        name: '',
        region:'',
      },
      dialogImageUrl: '',
      dialogVisible: false  
      
    }
  },
   methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      nextTo(){
        this.$parent.next();
      }
    }
}
</script>

<style lang="scss" scoped>
.title{
  display: flex;
  padding: 14px;
  border-bottom: 1px solid #D3D3D3;
  span{
    margin-left: 10px;
  }
}

.dataList{
  padding: 20px;
}

/deep/ .el-upload--picture-card{
  background: white;
  border: 0px;
  width: 120px;
  height: 120px;
}

/deep/ .el-upload-dragger{
  background: white;
  border: 0px;
  width: 323px;
  height: 161px;
}

/deep/ .contentInput{
  .el-input__inner{
    height: 85px;
  }
}

.middle{
  display: flex;
  justify-content: center;
}

</style>